<!--
 * @Description:
 * @Date: 2024-06-25 21:24:10
 * @LastEditTime: 2024-07-31 14:56:25
-->
<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5">
{
  style: {
    navigationBarTitleText: '处理评价',
  },
}
</route>
<template>
  <view class="bg-#fff overflow-hidden w-100% h-screen p-20rpx box-border overflow-auto">
    <wd-form ref="form" :model="model" :rules="rules">
      <wd-cell prop="rating">
        <template #title>
          <view class="w-100% flex items-center">
            <view class="inline-block font-bold mr-20rpx">综合评价</view>
            <wd-rate v-model="model.rating" />
          </view>
        </template>
      </wd-cell>
      <wd-cell prop="evaluate">
        <template #title>
          <view>
            <view class="block font-bold mr-20rpx">说说想法</view>
            <wd-textarea
              v-model="model.evaluate"
              :maxlength="300"
              :show-word-limit="true"
              placeholder="说说您对处理速度和效果等方面的想法"
            />
          </view>
        </template>
      </wd-cell>
    </wd-form>
    <view class="w-100% px-80rpx mt-100rpx box-border">
      <wd-button block @click="submit">提交</wd-button>
    </view>
  </view>
</template>

<script lang="ts" setup>
import wdRate from 'wot-design-uni/components/wd-rate/wd-rate.vue'
import { updateVillage } from '@/service/VillageCondition/index'
import { FormRules } from 'wot-design-uni/components/wd-form/types'
import { useToast } from 'wot-design-uni'
const toast = useToast()
defineOptions({
  name: 'VillageCondition',
})
const form = ref()
const model = reactive<{
  rating: number
  evaluate: string
}>({
  rating: 0,
  evaluate: '',
})
const rules: FormRules = {
  rating: [
    {
      required: true,
      message: '请选择综合评价',
      validator: (value) => {
        if (value) {
          return Promise.resolve()
        } else {
          // eslint-disable-next-line prefer-promise-reject-errors
          return Promise.reject('请选择综合评价')
        }
      },
    },
  ],
  evaluate: [
    {
      required: true,
      message: '请输入说说想法',
      validator: (value) => {
        if (value) {
          return Promise.resolve()
        } else {
          // eslint-disable-next-line prefer-promise-reject-errors
          return Promise.reject('请输入说说想法')
        }
      },
    },
  ],
}
const cunId = ref(0)

// 测试 uni API 自动引入
onLoad(({ id }) => {
  cunId.value = id
})
function submit() {
  form.value.validate().then(({ valid, errors }) => {
    if (valid) {
      updateVillage({ ...model, id: cunId.value }).then((res) => {
        toast.success({
          msg: '操作成功',
          duration: 0,
        })
        setTimeout(() => {
          uni.navigateBack({
            delta: 1,
          })
          toast.close()
        }, 1500)
      })
    }
  })
}
</script>

<style>
::v-deep .wd-button {
  background: #029669 !important;
}
::v-deep .wd-search {
  padding: 0 !important;
}
::v-deep .wd-cell__left {
  flex: none !important;
  width: 100% !important;
}
::v-deep .wd-textarea {
  padding: 0 !important;
}
::v-deep .wd-textarea__value {
  padding: 20rpx !important;
  background: #f3f4f7 !important;
}
::v-deep .wd-textarea__count {
  right: 20rpx !important;
  background: #f3f4f7 !important;
}
::v-deep .wd-button {
  background: #029669 !important;
}
:deep(.wd-cell__wrapper) {
  flex-direction: column;
}
</style>
